<script setup lang="ts" name="Illustrations">
import { storeToRefs } from 'pinia'
import { useSignStoreWithOut } from '@/store/modules/sign'
import { dateUtil } from '@/utils/dateUtil'
import { data } from './data'
const { t } = useI18n() // 国际化
const signStore = useSignStoreWithOut()
const { activeIllustrationsType } = storeToRefs(signStore)

const name = ref('monday')

const getVisibleInfo = () => {
  const week = dateUtil().day()
  const hour = dateUtil().hour()
  if (hour < 9) {
    name.value = 'early'
  }else if (hour >= 9 && hour < 16) {
    switch (week) {
      case 1:
        name.value = 'monday'
        break;
      case 2:
        name.value = 'tuesday'
        break;
      case 3:
        name.value = 'wednesday'
        break;
      case 4:
        name.value = 'thursday'
        break;
      case 5:
        name.value = 'friday'
        break;
      case 6:
        name.value = 'saturday'
        break;
      case 0:
        name.value = 'sunday'
        break;
      default:
        name.value = 'monday'
        break;
    }
  } else if (hour >= 16 && hour < 17) {
    name.value = 'offDuty'
  }  else {
    name.value = 'overTime'
  }
}

onMounted(() => {
  getVisibleInfo()
})
</script>

<template>
  <div :class="[activeIllustrationsType === 'unit' ? 'w-2/5' : 'w-3/5']">
    <div class="rounded-full" :class="[activeIllustrationsType === 'lake' ? 'bg-[var(--el-fill-color)]' : '']">
      <component :is="data[activeIllustrationsType][name]" class="w-full h-full" />
    </div>
    <template v-if="activeIllustrationsType === 'lake'">
      <h1 class="text-center mt-[var(--el-space)]">{{ t('sign.illustrations.' + activeIllustrationsType, 'title') }} - {{ t('sign.illustrations.' + activeIllustrationsType + '.type', name) }}</h1>
    </template>
    <template v-else-if="activeIllustrationsType === 'star'">
      <h1 class="text-center mt-[var(--el-space)]">{{ t('sign.illustrations.' + activeIllustrationsType, 'title') }}</h1>
      <p class="text-center text-[16px]">{{ t('sign.illustrations.' + activeIllustrationsType + '.type', name) }}</p>
    </template>
    <template v-else>
      <h1 class="mt-[var(--el-space)]">{{ t('sign.illustrations.' + activeIllustrationsType, 'title') }}</h1>
      <p class=" text-[16px]">{{ t('sign.illustrations.' + activeIllustrationsType + '.type', name) }}</p>
    </template>
  </div>
</template>

<style scoped lang="scss"></style>
